<template>
	<view class="container">
		<view class="info-card">
			<image class="avatar" v-if="token" :src="userInfo.avatarUrl || images +'/avatar.png'" mode="widthFix" />
			<image class="avatar" v-if="!token" :src="images +'/avatar.png'" mode="widthFix" />
			<view class="loginBt" v-if="!token" @click="loginRed">
				点击登录
			</view>
			<div class="basic" v-if="token">
				<div class="username">{{userMsg.name || '用户名'}}
					<text class="userType"><text
							v-if="userMsg.membership">{{userMsg.membership+'-'}}</text>{{userMsg.roleName || '角色'}}</text>
				</div>
				<div class="userAddr">{{room.roomInfo+'-'+room.roomName}}</div>
			</div>
			<view class="userChange" v-if="token" @click="houseMan">
				房屋管理<view class="rightArrow"></view>
			</view>
		</view>
		<block v-if="userMsg.roleId==16">
			<view class="myAppr">由我审批</view>
			<view class="myNavsMenu">
				<view class="navsAllItem" v-for="(item,index) in ownerList" :key="index" @click="myApprove(index)">
					<image class="navsAllIcon" :src="localImages +item.url"></image>
					<view class="navsAllText">
						{{item.name || '123'}}
					</view>
					<view class="navsAllCount" v-if="item.allCount>0">{{item.allCount || 1}}
					</view>
				</view>
			</view>
		</block>

		<block v-if="userMsg.roleId==17">
			<view class="myAppr">我的申请</view>
			<view class="myNavsMenu">
				<view class="navsAllItem" v-for="(item,index) in headList" :key="index" @click="myApprove(index)">
					<image class="navsAllIcon" :src="localImages +item.url"></image>
					<view class="navsAllText">
						{{item.name || '123'}}
					</view>
					<view class="navsAllCount" v-if="item.allCount>0">{{item.allCount || 1}}
					</view>
				</view>
			</view>
		</block>

		<view class="navsItem" v-if="userMsg.roleId==16 || userMsg.roleId==17" @click="houseMem">
			<image class="navsItemIcon" :src="localImages +'/myMem.png'" mode="widthFix"></image>
			<view class="navsItemTil">成员</view>
			<view class="rightArrow"></view>
		</view>
		<view class="navsItem" @click="systemSet">
			<image class="navsItemIcon" :src="localImages +'/mySet.png'" mode="widthFix" />
			<view class="navsItemTil">设置</view>
			<view class="rightArrowTip" v-if="formData.faceSwitch==0">未上传人脸</view>
			<view class="rightArrow"></view>
		</view>
	</view>
</template>


<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				headList: [{
						'index': 1,
						name: '待审批',
						url: '/myPre.png',
						allCount: 0
					},
					{
						'index': 3,
						name: '已同意',
						url: '/myCom.png',
						allCount: 0
					},
					{
						'index': 6,
						name: '已拒绝',
						url: '/myRef.png',
						allCount: 0
					},
				],
				ownerList: [{
						'index': 1,
						name: '待审批',
						url: '/myPre.png',
						allCount: 0
					},
					{
						'index': 3,
						name: '已同意',
						url: '/myCom.png',
						allCount: 0
					},
					{
						'index': 6,
						name: '已拒绝',
						url: '/myRef.png',
						allCount: 0
					},
				],
				headIndex: 0, //头部标题索引
				token: '',
				myInfo: '',
				room: '',
				userMsg: '',
				userInfo: '',
				formData: {
					visitorNotifySwitch: 0,
					faceSwitch: -1,
				},
			}
		},

		onLoad() {},
		onShow() {
			var token = wx.getStorageSync('token');
			this.token = token

			if (token) {
				var userInfo = wx.getStorageSync('userInfo');
				this.userInfo = userInfo;
				var room = wx.getStorageSync('room');
				this.room = room;
				var userMsg = wx.getStorageSync('userMsg');
				this.userMsg = userMsg;
				this.approvalList();
				util.socketTest();
				this.systemSetting();
			}
		},
		methods: {
			//判断token，不存在就跳转登录
			tokenCheck() {
				if (this.token) {
					return true
				} else {
					this.loginRed()
				}
			},

			myApprove(index) {
				wx.navigateTo({
					url: '/pagesA/index/myApprove?index=' + index
				})
			},

			systemSet() {
				if (this.tokenCheck()) {
					wx.navigateTo({
						url: '/pages/index/systemSet'
					})
				}
			},

			houseMan() {
				wx.navigateTo({
					url: '/pages/index/houseMan'
				})
			},
			houseMem() {
				wx.navigateTo({
					url: '/pagesA/index/houseMen'
				})
			},
			goDetail(index) {
				wx.navigateTo({
					url: '/pages/subMe/approve/main?index=' + index
				})
			},

			//先获取用户头像再登录
			loginRed() {
				util.getUserProfile();
			},

			//获取该住户的门禁列表
			async approvalList() {
				var url = '/UserServer/owner/info/approvalList'
				var room = this.room
				var params = {
					roomId: room.roomId,
					ownerId: room.ownerId,
					projectId: room.projectId,
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				var userMsg = this.userMsg;
				//16=业主展示由我审批-统计显示待审批的角标数量
				//租客不展示待审批数字提示
				if (userMsg.roleId == 16) {
					var awaiteFilter2 = param.awaiteFilter.filter((item) => {
						return item.applyId != room.ownerId;
					})
					this.ownerList[0].allCount = awaiteFilter2.length;
				}
			},

			async systemSetting() {
				var url = '/UserServer/owner/info/systemSetting'
				var params = {
					roomId: this.room.roomId
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				this.formData = param;
			},


		},

	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #F3F6F9;
	}

	.info-card {
		position: relative;
		display: flex;
		width: 100vw;
		padding: 16px 30rpx 30rpx 30rpx;
		background-color: #fff;
		/* border 1px solid #f00 */
	}

	.avatar {
		width: 132rpx;
		height: 132rpx;
		border-radius: 50%;
		margin-right: 33rpx;
		/* border 1px solid #666 */
	}

	.loginBt {
		position: absolute;
		width: 140rpx;
		height: 50rpx;
		top: 50%;
		margin-top: -25rpx;
		left: 194rpx;
		text-align: center;
		color: #1086FF;
		border: 1px solid #1086FF;
		border-radius: 8rpx;
	}

	.basic,
	.username {
		font-size: 36rpx;
		line-height: 66rpx;
		font-weight: 600;
	}

	.userType {
		background: #0053FF;
		color: #fff;
		font-size: 26rpx;
		border-radius: 30rpx;
		padding: 6rpx 16rpx 6rpx 16rpx;
		margin-left: 10rpx;
	}

	.userAddr {
		font-size: 26rpx;
		line-height: 36rpx;
		color: #838383;
		font-weight: 400;
	}

	.userChange {
		position: relative;
		margin: 34rpx 0rpx 0rpx auto;
		padding: 0rpx 30rpx 0rpx 0rpx;
		color: #838383;
		line-height: 34rpx;
		white-space: nowrap;

		/* border 1px solid #666 */
		.rightArrow {
			right: 0rpx;
			top: 8rpx;
			width: 22rpx;
			height: 22rpx;
		}
	}

	.myAppr {
		background: #fff;
		color: #333333;
		padding: 30rpx 0rpx 10rpx 30rpx;
		margin: 14rpx 0rpx 0rpx 0rpx;
		border-bottom: 0.3px solid #D8D8D8;
	}

	.navsItem {
		display: flex;
		padding: 32rpx 0rpx 32rpx 30rpx;
		margin: 12rpx 0rpx 0rpx 0rpx;
		background: #fff;

		.navsItemIcon {
			display: inline-block;
			vertical-align: middle;
			width: 36rpx;
			height: 36rpx;
			font-size: 32rpx;
			color: #030303;
			/* outline 1rpx solid #00f */
		}

		.navsItemTil {
			color: #333333;
			font-size: 30rpx;
			line-height: 36rpx;
			margin-left: 10rpx;
			/* outline 1rpx solid #0f0 */
		}

		.rightArrow {
			right: 40rpx;
			margin-top: 6rpx;
			height: 22rpx;
			width: 22rpx;
		}
	}

	.rightArrowTip {
		margin-left: auto;
		margin-right: 60rpx;
		color: #999999;
		line-height: 36rpx;
		/* outline 1rpx solid #0f0 */
	}

	.myNavsMenu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 0rpx 62rpx 0rpx 62rpx;
	}

	.navsAllItem {
		position: relative;
		/* width: 228rpx; */
		text-align: center;
		color: #333333;
		font-size: 26rpx;
		padding: 26rpx 0rpx 26rpx 0rpx;
		/* border: 1rpx solid red; */
	}

	.navsAllIcon {
		width: 48rpx;
		height: 48rpx;
		/* border: 1rpx solid pink; */
	}

	.navsAllText {
		color: #999999;
		font-size: 28rpx;
		margin-top: 8rpx;
	}

	.navsAllCount {
		position: absolute;
		top: 10rpx;
		right: 0rpx;
		height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		background: #FF6E5D;
		color: #FFFFFF;
		border-radius: 17rpx;
		padding: 0rpx 12rpx 0rpx 12rpx;
	}
</style>
